<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-31 17:46:49
 * @LastEditTime : 2020-01-04 09:55:39
 * @LastEditors: Please set LastEditors
 -->
 <!doctype html>
 <html>
 
 <head>
	 <meta charset="utf-8">
	 <meta name="viewport"
		 content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	 <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	 <title>Hello APP</title>
	 <link rel="stylesheet" type="text/css" href="../../css/vant.css">
	 <link rel="stylesheet" type="text/css" href="../../css/base.css" />
	 <script type="text/javascript" src="../../script/jquery.js"></script>
	 <script type="text/javascript" src="../../script/layer/mobile/layer.js"></script>
	 <script type="text/javascript" src="../../script/vue.min.js"></script>
	 <script type="text/javascript" src="../../script/vant.min.js"></script>
	 <script type="text/javascript" src="../../script/fastclick.js"></script>
	 <script type="text/javascript" src="../../script/base.js"></script>
	 <style type="text/css">
		 .van-search {
			 padding: 6px 0;
			 border-bottom: 1px solid #ebedf0;
		 }
 
		 .van-search__action {
			 color: #cd1b21;
			 font-size: 13px;
			 font-weight: 700;
		 }
 
		 .result {
			 position: absolute;
			 left: 0;
			 top: 47px;
			 bottom: 0;
			 width: 100%;
			 overflow-y: auto;
			 -webkit-overflow-scrolling: touch;
		 }
 
		 .select-list {
			 overflow-y: auto;
			 max-height: 350px;
			 padding: 20px 0;
		 }
	 </style>
 </head>
 
 <body>
	 <div id="app" v-cloak>
		 <div class="init-full">
			 <van-nav-bar class="head" title="筛选" left-arrow @click-left="onClickLeft">
				 <div slot="right" class="head-right" v-if="allowClear">
					 <span @click="clear">清空</span>
					 <span @click="showSearch = true;">
						 <img src="../../image/search.png" />
					 </span>
				 </div>
			 </van-nav-bar>
			 <div class="body-no-bottom" :class="type==1?'body-no-bottom':'body-with-bottom'">
				 <div class="content">
					 <div>
						 <form action="">
							 <van-search placeholder="请输入搜索关键词" v-model="searchKey" show-action @search="searchList">
								 <div slot="action" @click="searchList">查询</div>
							 </van-search>
						 </form>
					 </div>
					 <div class="result">
						 <van-list v-model="listLoading" :finished="listFinished" finished-text="没有更多了"
							 @load="listOnLoad">
							 <div class="" v-for="(row,index) in resultArray">
								 <van-cell :value="row[displayArray[0].key]" clickable @click="selectRow(row)">
									 <div slot="right-icon" v-if="type!=1">
										 <van-checkbox v-model="row.checked" shape="square" slot="right-icon"
											 v-show="row.checked" />
									 </div>
								 </van-cell>
							 </div>
						 </van-list>
 
					 </div>
				 </div>
				 <van-loading v-if="showLoading" />
			 </div>
			 <div class="bottom" v-if="type!=1">
				 <div class="bottom-left-label" @click="showSelection = true;">
					 <span>共计选择{{selectArray.length}}</span>
				 </div>
				 <div class="bottom-right-button">
					 <van-button type="primary" block @click="selectArrayConfirm">确定</van-button>
				 </div>
			 </div>
 
			 <van-popup v-model="showSelection" round position="bottom">
				 <div class="select-list">
					 <van-cell v-for="(row,index) in selectArray" :value="row[displayArray[0].key]"></van-cell>
 
				 </div>
			 </van-popup>
 
			 <van-popup v-model="showDatePicker" position="bottom">
				 <van-datetime-picker v-model="currentDate" cancel-button-text="清空" type="date" @cancel="clearDatePicker"
					 @confirm="confirmDatePicker" />
			 </van-popup>
 
 
			 <van-popup v-model="showSearch" round position="bottom">
				 <div v-for="(row,index) in filterArray">
					 <van-cell v-if="row.colDataType == 'datetime'" :title="row.colDesc" :value="row.queryKey"
						 @click="openDatePicker(index)">
					 </van-cell>
					 <van-field v-else-if="row.colDataType == 'int'" :label="row.colDesc" v-model="row.queryKey">
					 </van-field>
					 <van-field v-else :label="row.colDesc" v-model="row.queryKey">
					 </van-field>
				 </div>
				 <div class="btn-padding">
					 <van-button type="primary" block style="border-radius: 0;" @click="searchList">查询</van-button>
				 </div>
			 </van-popup>
		 </div>
	 </div>
 </body>
 
 <script type="text/javascript">
	 var vm;
 
	 apiready = function () {
		 //$('.init-full').show();
		 var filter = api.pageParam.filter;
		 var screenName = api.pageParam.screenName;
		 var allowClear = api.pageParam.allowClear || false;
		 var type = api.pageParam.type;
		 var isDetail = api.pageParam.isDetail;
		 var isButton = api.pageParam.isButton;
		 var isImport = api.pageParam.isImport;
		 var isHistory = api.pageParam.isHistory || false;
 
		 var billRole = JSON.parse(window.localStorage.getItem('billRole'))
 
 
		 function getBillRoleList(data) {
			 let filterSQL = "";
			 let moduleName = data.replace(/app_/g, '');
			 let billList = billRole.filter(item => item.FListName == moduleName);
			 if (billList.length > 0) {
				 if (billList[0]["T_Value"] != '-1') {
					 filterSQL += '(';
					 //权限业务逻辑
					 let colTypes = [];//已执行过的类型列
					 let colSQLType = [];//多类型SQL集合
					 billList.forEach(item => {
						 if (item["SC_ColA"]) {
							 if (colTypes.filter(x => x == item["SC_ColA"]).length == 0) {
								 let sc_colAs = [];
								 let sc_colBs = [];
								 let current_filterSQL = "";
								 let current_billType = billList.filter(x => x["SC_ColA"] == item["SC_ColA"]);
								 for (var i = 0; i < current_billType.length; i++) {
									 sc_colAs.push("'" + current_billType[i]["T_Value"] + "'");
									 if (current_billType[i]["SC_ColB"]) {
										 sc_colBs.push("'" + current_billType[i]["T_Value"] + "'");
									 }
								 }
								 if (sc_colAs.length > 0) {
									 current_filterSQL += ' ' + item["SC_ColA"] + " in (" + sc_colAs.join(",") + ")"
									 if (sc_colBs.length > 0) {
										 current_filterSQL += " or " + current_billType[0]["SC_ColB"] + " in (" + sc_colBs.join(",") + ") "
									 }
								 }
								 if (current_filterSQL) {
									 current_filterSQL = " (" + current_filterSQL + ") ";
									 colSQLType.push(current_filterSQL);
								 }
								 colTypes.push(item["SC_ColA"]);
							 }
						 }
					 })
					 filterSQL += colSQLType.join(" and ");
					 filterSQL += " ) "
				 }
			 }
			 return filterSQL;
		 }
 
		 vm = new Vue({
			 el: '#app',
			 data: {
				 showLoading: false,
				 allowClear: allowClear,
				 type: type,
				 listLoading: false,
				 listFinished: true,
				 showSelection: false,
				 showSearch: false,
				 showDatePicker: false,
				 currentDate: new Date(),
				 datePickerIndex: -1,
				 searchKey: '',
				 paging: {
					 pageSize: 30,
					 pageIndex: 1,
					 totalCount: 0
				 },
				 columns: [],
				 params: [],
				 mainKey: '',
				 displayArray: [],
				 filterArray: [],
				 searchFilterArray: [],
				 resultArray: [],
				 selectArray: [],
				 filterStr: ''
			 },
			 created: function () {
 
				 // var appTop = parseInt(window.localStorage.getItem('safeAreaTop'));
				 // var appBottom = parseInt(window.localStorage.getItem('safeAreaBottom'));
				 // setTimeout(function () {
				 // 	$('.body-no-bottom').css({
				 // 		'height': 'calc(100% - ' + (appTop + 40) + 'px)'
				 // 	})
				 // 	$('.body-with-bottom').css({
				 // 		'height': 'calc(100% - ' + (appTop + 40 + 50) + 'px)'
				 // 	})
				 // }, 200)
 
 
				 this.getColumns();
			 },
			 methods: {
				 getColumns() {
					 FLD.formConfigAjax('AppFormList/GetDataByName', {
						 programId: localStorage.getItem("programId"),
						 objName: screenName
					 }, function (data) {
						 var filterCondition = data.ds[0]["filterCondition"] || '1=1';
						 filterCondition += " and " + (getBillRoleList(screenName) || " 1=1 ") + " ";
						 vm.columns = JSON.parse(data.ds[0]["columnsConfig"]);
						 for (var i in vm.columns) {
							 if (!vm.columns[i].isHidden) {
								 vm.displayArray.push({
									 label: vm.columns[i].colDesc,
									 key: vm.columns[i].colName
								 })
							 }
							 if (vm.columns[i].isKey) {
								 vm.mainKey = vm.columns[i].colName;
							 }
							 if (vm.columns[i].isColQuery) {
								 vm.filterArray.push(JSON.parse(JSON.stringify(vm.columns[i])))
							 }
							 if (vm.columns[i].isSearchCol) {
								 vm.searchFilterArray.push(JSON.parse(JSON.stringify(vm.columns[i])))
							 }
						 };
 
						 vm.params = {
							 isFormList: data.ds[0]["isFormList"],
							 physicalTableName: data.ds[0]["physicalTableName"],
							 isPaging: data.ds[0]["isPaging"],
							 filterCondition: filterCondition,
							 defaultOrder: data.ds[0]["defaultOrder"]
						 }
						 if (filter) {
							 vm.filterStr = filterCondition + ' and ' + filter;
						 } else {
							 vm.filterStr = filterCondition
						 }
 
						 vm.setLists();
					 })
 
				 },
				 setLists() {
					 FLD.formConfigAjax('SQLData/GetDataByPhysicalTableNameByPaging', {
						 programId: localStorage.getItem("programId"),
						 tableName: vm.params.physicalTableName,
						 pageSize: vm.paging.pageSize,
						 isForm: vm.params.isFormList,
						 filterCondition: vm.filterStr,
						 defaultOrder: vm.params.defaultOrder
					 }, function (data) {
						 vm.listFinished = false;
 
						 vm.resultArray = data.ds;
						 if (data.ds.length > 0) {
							 //绑定总长度
							 vm.paging.totalCount = data.ds1[0]["@TotalCount"];
						 }
					 })
 
				 },
				 listOnLoad() {
					 vm.paging.pageIndex++;
					 var queryColumns = [];
					 for (var i = 0; i < vm.columns.length; i++) {
						 queryColumns.push({
							 queryKey: vm.columns[i].queryKey,
							 colName: vm.columns[i].colName,
							 queryWhere: vm.columns[i].queryWhere,
							 filter_selection: vm.columns[i].filter_selection,
							 querySort: vm.columns[i].querySort
						 })
					 }
					 FLD.formConfigAjax('SQLData/GetDataByPhysicalTableNameByQueryPaging', {
						 programId: localStorage.getItem("programId"),
						 tableName: vm.params.physicalTableName,
						 columns: queryColumns,
						 currentCol: '',
						 pageIndex: vm.paging.pageIndex,
						 pageSize: vm.paging.pageSize,
						 isForm: vm.params.isFormList,
						 filterCondition: vm.filterStr,
						 defaultOrder: vm.params.defaultOrder
					 }, function (data) {
						 vm.listLoading = false;
						 for (var i in data.ds) {
							 for (var j in vm.selectArray) {
								 if (data.ds[i][vm.mainKey] == vm.selectArray[j][vm.mainKey]) {
									 data.ds[i].checked = true;
								 }
							 }
						 }
						 vm.resultArray = vm.resultArray.concat(data.ds);
 
						 if (data.ds.length > 0) {
							 //绑定总长度
							 vm.paging.totalCount = data.ds1[0]["@TotalCount"];
						 } else {
							 vm.listFinished = true;
						 }
					 })
 
 
				 },
				 openDatePicker(index) {
					 vm.datePickerIndex = index;
					 vm.showDatePicker = true;
				 },
				 //清空所选日期
				 clearDatePicker() {
					 vm.filterArray[vm.datePickerIndex].queryKey = '';
					 vm.showDatePicker = false;
				 },
				 //确认当前所选日期
				 confirmDatePicker(value) {
					 vm.filterArray[vm.datePickerIndex].queryKey = FLD.getFormatDate(value).split(' ')[0];
					 vm.showDatePicker = false;
				 },
				 //查询数据
				 searchList() {
					 if (filter) {
						 vm.filterStr = filter;
					 } else {
						 vm.filterStr = '1=1';
					 }
					 vm.filterStr += ' and ' + vm.params.filterCondition;
					 //输入框查询
					 if (vm.searchKey && vm.searchFilterArray.length > 0) {
						 vm.filterStr += " and ( ";
						 var searchFilter = [];
						 for (var i = 0; i < vm.searchFilterArray.length; i++) {
							 searchFilter.push(" " + vm.searchFilterArray[i].colName + " like '%" + vm.searchKey + "%' ");
						 }
						 vm.filterStr += " " + searchFilter.join(' or ') + " )";
					 }
					 //查询条件查询
					 if (vm.filterArray.length > 0) {
						 let operFilterArray = vm.filterArray.filter(function (item) {
							 return item.queryKey && item.queryKey !== 0;
						 });
						 if (operFilterArray.length > 0) {
							 vm.filterStr += " and ( ";
							 var searchFilter = [];
							 for (var i = 0; i < operFilterArray.length; i++) {
								 if (operFilterArray[i].colQueryWhere == 'like') {
									 searchFilter.push(" " + operFilterArray[i].colName + " like '%" + operFilterArray[i].queryKey + "%' ");
								 }
								 else {
									 searchFilter.push(" " + operFilterArray[i].colName + " " + operFilterArray[i].colQueryWhere + " '" + operFilterArray[i].queryKey + "' ");
								 }
							 }
							 vm.filterStr += " " + searchFilter.join(' and ') + " )";
						 }
					 }
 
					 var queryColumns = [];
					 for (var i = 0; i < vm.columns.length; i++) {
						 queryColumns.push({
							 queryKey: vm.columns[i].queryKey,
							 colName: vm.columns[i].colName,
							 queryWhere: vm.columns[i].queryWhere,
							 filter_selection: vm.columns[i].filter_selection,
							 querySort: vm.columns[i].querySort
						 })
					 }
 
					 vm.showSearch = false;
					 vm.paging.pageIndex = 1;
 
					 FLD.formConfigAjax('SQLData/GetDataByPhysicalTableNameByQueryPaging', {
						 programId: localStorage.getItem("programId"),
						 tableName: vm.params.physicalTableName,
						 columns: queryColumns,
						 currentCol: '',
						 pageIndex: vm.paging.pageIndex,
						 pageSize: vm.paging.pageSize,
						 isForm: vm.params.isFormList,
						 filterCondition: vm.filterStr,
						 defaultOrder: vm.params.defaultOrder
					 }, function (data) {
						 vm.listFinished = false;
						 for (var i in data.ds) {
							 for (var j in vm.selectArray) {
								 if (data.ds[i][vm.mainKey] == vm.selectArray[j][vm.mainKey]) {
									 data.ds[i].checked = true;
								 }
							 }
 
						 }
						 vm.resultArray = data.ds;
						 if (data.ds.length > 0) {
							 //绑定总长度
							 vm.paging.totalCount = data.ds1[0]["@TotalCount"];
						 }
					 })
 
 
 
 
				 },
				 selectRow(row) {
					 if (vm.type == 1) {
						 var eventName = '';
						 if (isDetail) {
							 eventName = 'selectDetailRow';
						 } else {
							 eventName = 'selectRow';
						 }
						 if (isHistory) {
							 eventName = 'selectHistoryRow';
						 }
						 if (isButton) {
							 eventName = 'selectMainDetailArray';
						 }
						 if (isImport) {
							 eventName = 'selectImportRow';
						 }
						 if (eventName == 'selectMainDetailArray') {
							 api.sendEvent({
								 name: eventName,
								 extra: {
									 array: [row]
								 }
							 });
						 } else {
							 api.sendEvent({
								 name: eventName,
								 extra: {
									 row: row
								 }
							 });
						 }
 
						 api.closeWin();
					 } else {
						 if (typeof row.checked === 'undefined') {
							 this.$set(row, 'checked', true);
						 } else {
							 row.checked = !row.checked;
						 }
						 if (row.checked) {
							 vm.selectArray.push(row);
						 } else {
							 for (var i in vm.selectArray) {
								 if (vm.selectArray[i][vm.mainKey] == row[vm.mainKey]) {
									 vm.selectArray.splice(i, 1);
									 break;
								 }
							 }
						 }
 
					 }
 
				 },
				 selectArrayConfirm() {
					 var eventName = '';
					 if (isDetail) {
						 eventName = 'selectDetailArray';
					 } else {
						 eventName = 'selectArray';
					 }
					 if (isHistory) {
						 eventName = 'selectHistoryArray';
					 }
					 if (isButton) {
						 eventName = 'selectMainDetailArray';
					 }
					 if (isImport) {
						 eventName = 'selectImportArray';
					 }
					 api.sendEvent({
						 name: eventName,
						 extra: {
							 array: vm.selectArray
						 }
					 });
					 api.closeWin();
				 },
				 clear() {
					 var eventName = '';
					 if (isDetail) {
						 eventName = 'selectDetailRow';
					 } else {
						 eventName = 'selectRow';
					 }
					 api.sendEvent({
						 name: eventName,
						 extra: {
							 row: null,
							 selectType: filterData.S_Type,
							 type: type
						 }
					 });
					 api.closeWin();
				 },
				 onClickLeft() {
					 api.closeWin();
				 }
			 }
		 })
	 };
 </script>
 
 </html>